<template>
  <div class="auth">
    <div>
      <div class="register">
        <h1>注册</h1>
        <Register ref="childRegister"/>
      </div>
      <div class="cut" @click="toggleView" ref="cutElement">
        <h1 ref="cutTitle">{{ title }}</h1>
        <span ref="cutText">{{ text }}</span>
      </div>
      <div class="login">
        <h1>登录</h1>
        <Login ref="childLogin"/>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Register from '@/components/auth/Register.vue'
import Login from '@/components/auth/Login.vue'

const cutElement = ref(null) // 获取 cut 元素的引用
const cutTitle = ref(null) // 获取 cut 元素的 h1 标题引用
const cutText = ref(null) // 获取 cut 元素的 span 文本引用
const title = ref('没有账号')
const text = ref('点击注册')
const childRegister = ref(null)
const childLogin = ref(null)



const toggleView = () => {
  if (cutElement.value.style.marginLeft === '50%') {
    // 切换到注册视图
    cutElement.value.style.marginLeft = '0px'
    cutElement.value.style.backgroundImage = 'linear-gradient(30deg, rgb(129, 203, 255), rgb(169, 153, 255))'
    title.value = '没有账号'
    text.value = '点击注册'
    childLogin.value.generateCaptcha()
    childLogin.value.clearInputs()
  } else {
    // 切换到登录视图
    cutElement.value.style.marginLeft = '50%'
    cutElement.value.style.backgroundImage = 'linear-gradient(30deg, rgb(144, 183, 255), rgb(182, 138, 255))'
    title.value = '已有账号'
    text.value = '点击登录'
    childRegister.value.clearInputs()
  }
}
</script>

<style scoped>
.auth {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(45deg, rgb(112, 222, 255), rgb(198, 118, 255));
}

.auth>div {
  width: 55%;
  height: 70%;
  display: flex;
  position: relative;
  box-shadow: 2px 2px 10px rgb(0, 0, 0);
}

.register,
.login,
.cut {
  width: 50%;
  height: 100%;
}

.register,
.login {
  background-color: rgb(245, 239, 239);
  text-align: center;
  padding-top: 30px;
  box-sizing: border-box;
}

.cut {
  position: absolute;
  cursor: pointer;
  transition: all 0.7s;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-left : 0px;
  background-image : linear-gradient(30deg, rgb(129, 203, 255), rgb(169, 153, 255));
  text-shadow: 2px 2px black;
  font-weight: 900;
}

.cut h1 {
  margin-bottom: 10px;
}
</style>